<template>
  <div class="count-card flex-center" :style="{ backgroundColor: color }">
    <div class="icon m-8">
      <slot />
    </div>
    <div class="flex-col flex-x-center flex-1 color-#fff">
      <div>{{ title }}</div>
      <div class="font-600">
        <countTo :startVal="0" :endVal="value" :duration="1500" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { CountTo } from "vue3-count-to";

export default {
  components: {
    CountTo,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    value: {
      type: Number,
      default: 0,
    },
    color: {
      type: String,
      default: "#fff",
    },
    
  },

  setup(props) {},
};
</script>

<style lang="scss" scoped>
.count-card {
  height: 80px;
  border-radius: 5px;
  .icon {
    width: 40px;
    height: 40px;
  }
}
</style>
